<script setup lang="ts">
import {Delete, Plus} from '@element-plus/icons-vue'
import {ref} from 'vue'
import {TestCase} from "../../../../../generated";
import GenerateProgress from "../../../../components/GenerateProgress.vue"

const props = defineProps<{
  testCase?: TestCase[]
  isEditorFullscreen?: boolean
}>()

const emit = defineEmits<{
  'update:testCase': [value: TestCase[]]
  'generate:testCase': []
}>()

// 添加生成测试用例状态控制
const isGeneratingTestCase = ref(false)

const addTestCase = () => {
  emit('update:testCase', [...(props.testCase || []), {
    input: '',
    output: '',
    hint: '',
    score: 0
  }])
}

const removeTestCase = (index: number) => {
  const newCases = [...(props.testCase || [])]
  newCases.splice(index, 1)
  emit('update:testCase', newCases)
}

// 生成测试用例处理函数
const handleGenerateTestCase = () => {
  isGeneratingTestCase.value = true
  emit('generate:testCase')
}

// 提供重置方法给父组件
const resetGeneratingTestCase = () => {
  isGeneratingTestCase.value = false
}

defineExpose({
  resetGeneratingTestCase
})
</script>

<template>
  <el-form-item
      prop="testCase"
      :class="{ 'hide-when-fullscreen': isEditorFullscreen }"
  >
    <div class="test-cases-container">
      <div class="test-cases-header">
        <div class="header-left">
          <h3 class="section-title">测试用例<span class="required-asterisk">*</span></h3>
          <span class="case-count">共 {{ testCase?.length || 0 }} 个用例</span>
        </div>
        <div>
          <el-button color="#626aef" @click="handleGenerateTestCase">AI 生成</el-button>
          <el-button type="primary" :icon="Plus" @click="addTestCase">
            添加新测试用例
          </el-button>
        </div>
      </div>

      <div class="test-cases-wrapper">
        <div class="test-cases-list">
          <el-collapse>
            <el-collapse-item
                v-for="(testCase, index) in testCase"
                :key="index"
            >
              <template #title>
                <div class="collapse-header">
                  <div class="header-left-section">
                    <el-tag size="large" effect="plain" round type="info">
                      用例 #{{ index + 1 }}
                    </el-tag>
                    <div class="case-info">
                      <el-tag size="small" effect="plain" type="success" v-if="testCase.score">
                        {{ testCase.score }} 分
                      </el-tag>
                      <el-tag size="small" effect="plain" type="warning" v-if="testCase.hint">
                        包含提示
                      </el-tag>
                    </div>
                  </div>
                  <el-button
                      v-if="props.testCase && props.testCase.length > 1"
                      type="danger"
                      :icon="Delete"
                      circle
                      plain
                      size="small"
                      @click.stop="removeTestCase(index)"
                  />
                </div>
              </template>

              <div class="test-case-content">
                <div class="test-case-header">
                  <div class="input-section score-section">
                    <div class="section-header">
                      <span class="section-label">分值</span>
                      <el-tag size="small" effect="plain" type="info">SCORE</el-tag>
                    </div>
                    <div class="score-input-wrapper">
                      <el-input-number
                          v-model="testCase.score"
                          :min="0"
                          :max="100"
                          controls-position="right"
                          placeholder="分值"
                          class="score-input"
                      />
                    </div>
                  </div>
                </div>

                <div class="main-inputs">
                  <div class="input-section">
                    <div class="section-header">
                      <span class="section-label">输入数据</span>
                      <el-tag size="small" effect="plain" type="info">INPUT</el-tag>
                    </div>
                    <el-input
                        v-model="testCase.input"
                        type="textarea"
                        :rows="4"
                        placeholder="请输入测试用例的输入数据"
                        resize="none"
                    />
                  </div>

                  <div class="input-section">
                    <div class="section-header">
                      <span class="section-label">期望输出</span>
                      <el-tag size="small" effect="plain" type="success">OUTPUT</el-tag>
                    </div>
                    <el-input
                        v-model="testCase.output"
                        type="textarea"
                        :rows="4"
                        placeholder="请输入测试用例的期望输出"
                        resize="none"
                    />
                  </div>
                </div>

                <div class="additional-section">
                  <div class="input-section flex-grow">
                    <div class="section-header">
                      <span class="section-label">提示信息</span>
                      <el-tag size="small" effect="plain" type="warning">HINT</el-tag>
                    </div>
                    <el-input
                        v-model="testCase.hint"
                        type="textarea"
                        :rows="2"
                        placeholder="请输入提示信息（可选）"
                        resize="none"
                    />
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
          <!-- 使用通用生成进度组件 -->
          <GenerateProgress
              :visible="isGeneratingTestCase"
              title="AI正在生成测试用例"
              :fullscreen="false"
          />
        </div>
      </div>
    </div>
  </el-form-item>
</template>

<style scoped>
.test-cases-container {
  width: 100%;
  background: var(--el-bg-color);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid var(--el-border-color);
  margin-bottom: 16px;
}

.test-cases-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  position: relative;
  padding-bottom: 8px;
}

.section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 2px;
  background-color: var(--el-color-primary);
  border-radius: 1px;
}

.required-asterisk {
  color: var(--el-color-danger);
  margin-left: 4px;
}

.case-count {
  color: var(--el-text-color-secondary);
  font-size: 14px;
}

.test-cases-wrapper {
  position: relative;
}

.test-cases-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.collapse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.header-left-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.case-info {
  display: flex;
  gap: 8px;
}

.test-case-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.test-case-header {
  margin-bottom: 20px;
}

.main-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.input-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--el-text-color-primary);
  position: relative;
  padding-left: 10px;
}

.section-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  background-color: var(--el-color-primary);
  border-radius: 1.5px;
}

.additional-section {
  padding-top: 16px;
  border-top: 1px solid var(--el-border-color-lighter);
}

.flex-grow {
  flex-grow: 1;
}

.score-section {
  width: 200px;
}

.score-input-wrapper {
  display: flex;
  align-items: flex-start;
}

:deep(.score-input) {
  width: 100%;
}

:deep(.score-input .el-input-number__decrease),
:deep(.score-input .el-input-number__increase) {
  border-radius: 0;
}

:deep(.score-input .el-input__wrapper) {
  padding-right: 30px;
}

.hide-when-fullscreen {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .test-case-header {
    margin-bottom: 16px;
  }

  .score-section {
    width: 100%;
  }

  .main-inputs {
    grid-template-columns: 1fr;
  }

  .additional-section {
    grid-template-columns: 1fr;
  }

  .score-input-wrapper {
    height: auto;
  }
}
</style> 